<template>
  <view class="book_viewing_box">
    <view class="item">
      <uni-easyinput
        v-model="info.call"
        type="number"
        placeholder="请输入您的称呼~如：黎先生"
      />
    </view>

    <view class="item">
      <uni-easyinput
        v-model="info.phone"
        type="number"
        placeholder="请输入联系电话"
      />
    </view>

    <view class="item">
      <uni-datetime-picker
        type="datetime"
        :start="time.start"
        :end="time.end"
        :hide-second="true"
        v-model="maintenanceTime"
        @change="changeLog"
      />
    </view>
  </view>

  <button-click msg="提交预约" :is-bottom="true" @on-click="onSubmit" />
</template>

<!-- 预约看房页面 -->
<script lang="ts" setup>
import { useRegionStore } from '@/store/region'
import uniDatetimePicker from '@/components/common/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
import uniEasyinput from '@/components/common/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import buttonClick from '@/components/common/button_click/button-click.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { ReqAddlBooking } from '@/api/booking'

//区域全局状态
const regionStore = useRegionStore()

//上门时间选择范围
const time = ref({
  start: '',
  end: '',
})

//初始化时间选择列表
const initDate = () => {
  //起始时间
  let nowTime = new Date()
  time.value.start = `${nowTime.getFullYear()}-${
    (nowTime.getMonth() + 1 < 10 ? '0' : '') + (nowTime.getMonth() + 1)
  }-${(nowTime.getDate() < 10 ? '0' : '') + nowTime.getDate()} 08:30`

  //截止时间
  let timestamp = Date.now() + 1000 * 60 * 60 * 24 * 7
  let endTime = new Date(timestamp)
  time.value.end = `${endTime.getFullYear()}-${
    (endTime.getMonth() + 1 < 10 ? '0' : '') + (endTime.getMonth() + 1)
  }-${(endTime.getDate() < 10 ? '0' : '') + endTime.getDate()} 18:30`
}

//预约时间
const maintenanceTime = ref('')

//时间选择确认时触发
const changeLog = (e: any) => {
  if (e == '' || !e) {
    return
  }
  //例如格式为 2024-06-07 18:56
  let nowTime = new Date()
  let dateArr = e.split(' ')
  //日期年月日
  let dayArr = dateArr[0].split('-')
  //小时、分钟
  let timeArr = dateArr[1].split(':')
  //选中时间的小时 要大于 当前小时3小时以后的时间
  if (
    nowTime.getDate() == parseInt(dayArr[2]) &&
    parseInt(timeArr[0]) < nowTime.getHours() + 2
  ) {
    uni.showToast({
      title: '预约时间须提前2个小时',
      icon: 'none',
      mask: true,
    })
    setTimeout(() => {
      maintenanceTime.value = ''
    }, 200)
    return
  }
  let hour = parseInt(timeArr[0]) < 8 || parseInt(timeArr[0]) > 18
  let minute = parseInt(timeArr[0]) == 18 && parseInt(timeArr[1]) > 30
  if (hour || minute) {
    uni.showToast({
      title: '预约时间 8:00 ~ 18:30',
      icon: 'none',
      mask: true,
    })
    setTimeout(() => {
      maintenanceTime.value = ''
    }, 200)
    return
  }
}

//检查校验提交参数
const checkValue = () => {
  if (info.value.address == '') {
    uni.showToast({
      title: '地址不能为空',
      icon: 'none',
      mask: true,
    })
    return false
  }
  if (info.value.call == '') {
    uni.showToast({
      title: '称呼不能为空',
      icon: 'none',
      mask: true,
    })
    return false
  }
  if (info.value.phone == '') {
    uni.showToast({
      title: '请填写电话号码',
      icon: 'none',
      mask: true,
    })
    return false
  }
  if (info.value.timer == '') {
    uni.showToast({
      title: '请选择预约时间',
      icon: 'none',
      mask: true,
    })
    return false
  }

  return true
}

//防止重复点击
const isReq = ref(true)

//填写信息
const info = ref({
  phone: '',
  call: '',
  address: '',
  timer: '',
})

//提交预约
const onSubmit = () => {
  info.value.timer = maintenanceTime.value
  if (!isReq.value || !checkValue()) {
    return
  }
  isReq.value = false
  ReqAddlBooking(info.value)
    .then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: res.data ? '预约成功' : '预约失败',
          icon: 'none',
          mask: true,
          duration: 500,
        })
        if (res.data) {
          setTimeout(() => {
            uni.navigateBack({ delta: 1 })
          }, 500)
        }
      }
    })
    .finally(() => {
      isReq.value = true
    })
}

//页面加载
onLoad((e) => {
  if (e && e.district) {
    info.value.address = `${regionStore.getRegionInfo()}-${e.district}`
  }
  initDate()
})
</script>

<style scoped lang="scss">
.book_viewing_box {
  background-color: $uni-bg-color-grey;
  border-radius: 10rpx;
  padding: 0 20rpx;
  width: calc(100% - 40rpx);

  .item {
    padding: 0 20rpx;
    width: calc(100% - 40rpx);
    margin-bottom: 30rpx;
    background-color: $uni-bg-color;
  }
}
</style>
